<template>
  <div class="content">
    <!-- 左侧弹框 -->
    <mt-popup v-model="popupVisible" position="left" class="left">
      <!-- <div>嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻</div> -->
      <my-left></my-left>
    </mt-popup>
    <div class="hello" @clack="move($event)">
      <!-- head -->
      <my-head :sty="selected" @fn="cb" class="zindex"></my-head>

      <!-- 主体组件 -->

      <keep-alive>
        <router-view @scroll="scroll"></router-view>
      </keep-alive>

      <mt-tabbar v-model="selected" class="zindex" fixed>
        <mt-tab-item id="Index" @click.native="qie('Index')">
          <img slot="icon" src="../assets/logo.png" />
          首页
        </mt-tab-item>
        <mt-tab-item id="Pd" @click.native="qie('Pd')">
          <img slot="icon" src="../assets/logo.png" />
          频道
        </mt-tab-item>
        <mt-tab-item id="Dt" @click.native="qie('Dt')">
          <img slot="icon" src="../assets/logo.png" />
          动态
        </mt-tab-item>
        <mt-tab-item id="Hyg" @click.native="qie('Hyg')">
          <img slot="icon" src="../assets/logo.png" />
          会员购
        </mt-tab-item>
      </mt-tabbar>
    </div>
  </div>
</template>

<script>
import left from "./Left/index";
export default {
  name: "Zhujiemian",
  data() {
    return {
      popupVisible: false,
      selected: "Hyg"
    };
  },
  methods: {
    qie(e) {
      if (e == this.$router.history.current.name) return;
      this.$router.push({ name: e });
    },
    cb(s) {
      this.popupVisible = s;
      console.log(s);
    },
    scroll(e) {
      // let tag = e.path.map(r=>{
      //   console.log(r);
      // })
      console.log(e);
    }
  },
  watch: {
    $route(to, from) {
      this.selected = to.name;
    }
  },
  components: {
    "my-left": left
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.hello {
  padding-top: 1.2rem;
}
.content {
  background: green;
  width: 100%;
  height: 100%;
}
.zindex {
  z-index: 9;
}
.left {
  height: 100%;
  width: 80%;
  max-width: 80%;
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
